// 悬浮按钮组件
<template>
  <div class="menuBut" style>
    <div id="dragbtn" class="button-box" v-drag draggable="false">
      <div
        class="btn-bg-img"
        @click="openBox"
        @touchstart="down()"
        @touchmove="move()"
        @touchend="end()"
      ></div>
      <div class="font-box">{{ text }}</div>
    </div>
  </div>
</template>

<script>
export default {
  // components: { caseInfo },
  props: ['caseID'],
  data() {
    return {
      text: '我的菜单',
      isOpen: false,
      isMove: false,
      //
      flags: false,
      position: { x: 0, y: 0 },
      nx: '',
      ny: '',
      dx: '',
      dy: '',
      xPum: '',
      yPum: '',
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    //平板模式下，初始化后10秒钟关闭菜单
    init() {
      if (document.body.clientWidth < 1444) {
        setTimeout(() => {
          this.$emit('handleShowMenu', 'close')
        }, 10000)
      }
    },
    openBox() {
      let isClick = document.getElementById('dragbtn').getAttribute('data-flag')
      if (isClick !== 'true') {
        return false
      }
      this.$emit('handleShowMenu')
    },
    mousedowm(e) {
      // 鼠标按下时的鼠标所在的X，Y坐标
      this.mouseDownX = e.pageX
      this.mouseDownY = e.pageY
      // 初始位置的X，Y 坐标
      console.log('e', e)
      // 表示鼠标已按下
      this.flag = true
    },
    mousemove(e) {
      if (this.flag) {
        console.log('e :', e)
      }
    },
    // 实现移动端拖拽
    down() {
      this.flags = true
      let touch
      if (event.touches) {
        touch = event.touches[0]
      } else {
        touch = event
      }
      this.position.x = touch.clientX
      this.position.y = touch.clientY
      this.dx = dragbtn.offsetLeft
      this.dy = dragbtn.offsetTop
    },
    move() {
      if (this.flags) {
        let touch
        if (event.touches) {
          touch = event.touches[0]
        } else {
          touch = event
        }
        this.nx = touch.clientX - this.position.x
        this.ny = touch.clientY - this.position.y
        this.xPum = this.dx + this.nx
        this.yPum = this.dy + this.ny
        //添加限制：只允许在屏幕内拖动
        const maxWidth = document.body.clientWidth - 54 //屏幕宽度减去悬浮框宽高
        const maxHeight = document.body.clientHeight - 54
        if (this.xPum < 0) {
          //屏幕x限制
          this.xPum = 0
        } else if (this.xPum > maxWidth) {
          this.xPum = maxWidth
        }
        if (this.yPum < 0) {
          //屏幕y限制
          this.yPum = 0
        } else if (this.yPum > maxHeight) {
          this.yPum = maxHeight
        }
        dragbtn.style.left = this.xPum + 'px'
        dragbtn.style.top = this.yPum + 'px'
        //阻止页面的滑动默认事件
        document.addEventListener(
          'touchmove',
          function () {
            // 1.2 如果碰到滑动问题，请注意是否获取到 touchmove
            // event.preventDefault() //jq 阻止冒泡事件
            event.stopPropagation() // 如果没有引入jq 就用 stopPropagation()
          },
          false
        )
      }
    },
    //鼠标释放时候的函数
    end() {
      this.flags = false
    },
  },
  directives: {
    drag(el) {
      let oDiv = el // 当前元素
      // let self = this // 上下文
      let firstTime = '',
        lastTime = ''
      // 禁止选择网页上的文字
      document.onselectstart = function () {
        return false
      }
      //pc端
      oDiv.onmousedown = function (e) {
        // 鼠标按下，计算当前元素距离可视区的距离
        let disX = e.clientX - oDiv.offsetLeft
        let disY = e.clientY - oDiv.offsetTop
        document.getElementById('dragbtn').setAttribute('data-flag', false)
        firstTime = new Date().getTime()
        document.onmousemove = function (e) {
          // 通过事件委托，计算移动的距离
          let l = e.clientX - disX
          let t = e.clientY - disY
          // 移动当前元素
          oDiv.style.left = l + 'px'
          oDiv.style.top = t + 'px'
        }
        document.onmouseup = function (e) {
          document.onmousemove = null
          document.onmouseup = null
          lastTime = new Date().getTime()
          if (lastTime - firstTime < 200) {
            document.getElementById('dragbtn').setAttribute('data-flag', true)
          }
        }
        // return false不加的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
        return false
      }
    },
  },
}
</script>

<style scoped>
.menuBut {
  position: relative;
  display: none;
}
.button-box {
  width: 60px;
  border-radius: 50%;
  position: fixed;
  left: 85%;
  opacity: 1;
  z-index: 999999;
  font-size: 13px;
  top: 80%;
}
.btn-bg-img {
  width: 50px;
  height: 50px;
  /* background-image: url('../../assets/images/gis-label.png'); */
  /* background-image: url('../../assets/mainMenuImg/menuButBule.png'); */
  background-image: url('../../assets/images/gis-sensor-blue.png');
  background-size: cover;
  margin: 0 auto;
}
.button-box:hover {
  color: white;
  opacity: 1;
}

.font-box {
  color: #1296db;
  text-align: center;
}
/*分辨率小于1444px 按钮显示*/
@media screen and (max-width: 1444px) {
  .menuBut {
    display: block;
  }
}
</style>
